<template>
  <div>
    <h1 style="color: orange">{{id==''?'发布页面':'修改页面'}}</h1>
    <el-form label-width="80px">
        <el-form-item label="文章标题">
          <el-input placeholder="请输入文章标题" v-model="c.title"/>
        </el-form-item>
      <el-form-item label="文章分类">
        <el-radio-group v-model="c.type" @input="changeType()">
          <el-radio-button label="1">烘焙食谱</el-radio-button>
          <el-radio-button label="5">烘焙视频</el-radio-button>
          <el-radio-button label="8">行业资讯</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="二级分类">
        <el-select v-model="c.categoryId">
          <el-option v-for="(item,i) in categoriesArr"
                     :label="item.name"
                     :value="item.id"
                     :key="i"
            ></el-option>

        </el-select>
      </el-form-item>


      <el-form-item label="封面">
        <!--    组件上传    -->
        <el-upload
            :action="this.BASE_URL+'/v1/upload'"
            :limit="1"
            name="file"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handlerSuccess"
        >
          <i class="el-icon-plus"></i>

        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

        <!-- 添加富文本编辑器-->
      <el-form-item v-show="c.type!=5" label="文章内容">
        <div id="contentId"></div>
      </el-form-item>


      <el-form-item v-show="c.type==5" label="视频">
        <!--    组件上传    -->
        <el-upload
            :action="this.BASE_URL+'/v1/upload'"
            :limit="1"
            name="file"
            accept="video/*"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handlerSuccess"
        >
          <el-button type="primary">点击上传视频</el-button>
          <div>只能上传MP4格式，且不可超过100MB</div>
        </el-upload>

      </el-form-item>


      <el-form-item >
        <el-button type="primary" @click="postContent()">{{id==''?'发布':'修改'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      c: {
        type:1,
        title:'',
        categoryId:''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      categoriesArr:[],
      id:'',

    }
  },
  methods: {
    //预处理
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //加载一级分类下的二级分类数据
    loadCategories(){

        //console.log(this.c.type)
        let url = `${this.BASE_URL}/v1/categories/${this.c.type}/getCategories`
        this.axios.get(url).then(
            res=>{
              if(res.data.code == 1){
                this.categoriesArr = res.data.data
              }else{
                this.$message.error(res.data.msg)
              }
            }
        )
    },
    changeType(){
      this.c.categoryId = ''
      this.loadCategories()
    },
    // 处理删除服务器中的图片
    handleRemove(file) {
      console.log(file);
      this.axios.post(this.BASE_URL+'/v1/remove?url='+file.response.data)
          .then(res=>{
            if(res.data.code == 1){
              this.$message.success("删除服务的图片成功！！")
            }else{
              this.$message.error(res.data.msg)
            }
          })
    },
    //  需要将上传的图片的位置给内容的图片位置  保存到数据库
    handlerSuccess(response, file, fileList){
      //console.log(response)
      //console.log(file)
      //如果路径中包含图片 image
      if(file.raw.type.includes('image'))
        this.c.imgUrl = response.data
      else //如果不是图片那就是视频
        this.c.videoUrl = response.data
    },
    //发布内容
    postContent(){
      //如果标题为null  就不能发送
      if (this.c.title.trim() == "" ){
        this.$message.error("标题不能为空！！")
        return;
      }

      //如果标题为null  就不能发送
      if (this.c.categoryId == '' ){
        this.$message.error("请选择类别")
        return;
      }
      //判断图片为null
      if(this.c.imgUrl == null){
        this.$message.error("请选择封面！！")
        return;
      }

      if(this.c.type != 5){
        //将富文本编辑器中内容获取到
        this.c.content = this.editor.txt.html();
        //将富文本编辑器中摘要50个字符
        this.c.brief = this.editor.txt.text().slice(0,50)

        //判断图片为null
        if(this.c.content.trim() == ""){
          this.$message.error("请输入内容！")
          return;
        }

      }else{
        //判断图片为null
        if(this.c.imgUrl == null){
          this.$message.error("请选择封面！！")
          return;
        }
      }

      let url = this.BASE_URL + '/v1/contents/saveOrUpdate'

      //将用户的id赋值给c的createBy
      let user = JSON.parse(localStorage.user)
      if(user == null){
        this.$router.push('/')
        return
      }
      this.c.createBy = user.id
      //console.log(this.c)

      let data = this.qs.stringify(this.c)
      //console.log(data)
      this.axios.post(url,data)
      .then(res=>{
        if(res.data.code == 1){
          if(this.id == ''){
            this.$message.success("发布内容成功")
          }else{
            this.$message.success("修改内容成功")
          }
          this.$router.push('/personal/management')
        }else{
          this.$message.error(res.data.msg)
        }
      })

    },
    //修改内容获取
    updateGetContent(){
      if(location.search.includes('id')){
        //获取id的值
        this.id = new URLSearchParams(location.search).get('id')
        let url = this.BASE_URL + '/v1/contents/getContent/'+this.id
        this.axios.get(url).then(res=>{
          if(res.data.code == 1){
            this.c = res.data.data

            this.loadCategories()

            //把内容显示到富文本编辑器中
            this.editor.txt.html(this.c.content);
          }else{
            this.$message.error(res.data.msg)
          }
        })
      }
    }
  },
  mounted() {

    this.updateGetContent()


    //第一次加分类内容
    this.loadCategories()


    //钩子函数 在页面加载完成就执行该方法中的内容
    this.editor = new this.wangEditor('#contentId')
    this.editor.create()
  }
}
</script>

<style scoped>

</style>
